import React from 'react';
import { Row, Col, Button, Form, Input, Checkbox, Message, Carousel} from 'antd';

const createForm = Form.create;
const FormItem = Form.Item;

function noop() {
  return false;
}

//自动登录选框
function onChange(e) {
  console.log(`checked = ${e.target.checked}`);
}

let BannerBox = React.createClass({
    getInitialState() {
      return {
        data: null,
        mobilePhone: '', //初始化
        password: '',
        funderMobilePhone: '',
        funderPassword: '',
        code: '',
        Record: [],
        isAvailable: false,//是否可用        
        isActive: true, // 是否为当前活动窗口
      }
    },

    contextTypes: {
      router: React.PropTypes.object
    },

    // 回车登录
    handleKeyEvent(event) {
      if (event.keyCode == 13) {
        this.handleSubmit();
      }
    },

    // 资金方回车登录
    handleKeyEventFunder(event) {
      if (event.keyCode == 13) {
        this.handleSubmitFunder();
      }
    },
    handClick() {
        let goPathUrl = '/forgetPwd';
        this.context.router.push(goPathUrl);
      },
    handleSubmit(e) {
      this.props.form.validateFields((errors, values) => {
        if (!!errors) {
          return;
        }
        var params = this.props.form.getFieldsValue();
        
        Utils.sendAjax({
          url: '/user/doLogin',
          data: JSON.stringify(params),
          method: 'post',
          callback: (result) => {
            if (result.code === '200') {
              let params = result.data
              let goPathUrl = '/workSpace';
              localStorage.userName = result.data.userName;
              localStorage.mobilePhone = result.data.mobilePhone;
              this.context.router.push({pathname: goPathUrl, state: {...params}})
            }else {
              this.error()
              
            }
          }
        })
      })

    },

    error() {
      Message.error('您输入的手机号码或登录密码错误', 10);
    },

    onClickTitle(value) {
       
        switch(value) {
            case 'active1': 
                this.setState({
                   
                    isActive: true,
                });
                break;
            case 'active2': 
                this.setState({
                    isActive: false,
                });
                break;    
        }
        
    },

    handleLandlordApply(){
        let goPathUrl = '/landlordApply';
        this.context.router.push({pathname: goPathUrl})
    },

    // 资金方登录
    handleSubmitFunder(e){
        
        this.props.form.validateFields((errors, values) => {
        if (!!errors) {
          return;
        }
        var params = this.props.form.getFieldsValue();
        let data = {};
        data.mobilePhone = params.funderMobilePhone;
        data.password = params.funderPassword;
        Utils.sendAjax({
          url: '/funder/doLogin',
          data: JSON.stringify(data),
          method: 'post',
          callback: (result) => {
            if (result.code === '200') {
              let params = result.data
              let goPathUrl = '/funder/resource/list';
              localStorage.funderUserName = result.data.userName;
              localStorage.funderMobilePhone = result.data.mobilePhone;
              this.context.router.push({pathname: goPathUrl, state: {...params}})
              console.log('localStorage.funderUserName',localStorage.funderUserName)
            }else {
              this.error()
              
            }
          }
        })
      })
        
        
    },

    handleFunderApply(){
        let goPathUrl = '/funderApply';
        this.context.router.push({pathname: goPathUrl})
    },
    render(){

        const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;

        
        let isHover1 = this.state.isActive? 'hover' : '';
        let isHover2 = this.state.isActive? '' : 'hover';


        // 房东登录框是否必填
        let isRequired = this.state.isActive? true: false;
        const mobilePhoneProps = getFieldProps('mobilePhone', {
            rules: [
                {required: isRequired, message: '手机号码不能为空'},
                {validator: Utils.phone},
            ],
            onChange: (e) => {
                this.setState({mobilePhone: e.target.value});
            },
        });

        const passwordProps = getFieldProps('password', {
            rules: [
                {required: isRequired, message: '登录密码不能为空'},
                {validator: Utils.password},
            ],
        });


        // 资金方登录框是否必填
        
        let isFunderRequired = this.state.isActive? false: true;
        const funderMobilePhoneProps = getFieldProps('funderMobilePhone', {
            rules: [
                {required: isFunderRequired, message: '手机号码不能为空'},
                {validator: Utils.phone},
            ],
            onChange: (e) => {
                this.setState({funderMobilePhone: e.target.value});
            },
        });

        const funderPasswordProps = getFieldProps('funderPassword', {
            rules: [
                {required: isFunderRequired, message: '登录密码不能为空'},
                {validator: Utils.password},
            ],
        });

        
        
        
        return (
            
                <div className="wrap1180">
                    <div className="login-box-bg"></div>
                    <div className="login-box">
                        <div className="tabNav">
                            <ul className="clearfix">
                                <li className={isHover1} onClick={this.onClickTitle.bind(this, 'active1')}>房东登录</li>
                                <li className={isHover2} onClick={this.onClickTitle.bind(this, 'active2')}>资金方登录</li>
                            </ul>
                        </div>
                        {
                            this.state.isActive?
                            <Form  horizontal form={this.props.form} >
                                <FormItem 
                                    hasFeedback>
                                    <i className="phone-img"></i>
                                    <Input idName="mobilePhone" value={this.state.mobilePhone} {...mobilePhoneProps} placeholder="请输入手机号码"/>
                                </FormItem>
                                <FormItem
                                    hasFeedback>
                                    <i className="password"></i>
                                    <Input type="password" {...passwordProps} placeholder="请输入登录密码" onKeyUp={this.handleKeyEvent}/>
                                </FormItem>
                                <FormItem
                                    hasFeedback
                                    className="login-row">
                                    {
                                        // <Checkbox className="automatic-login"
                                        //         onChange={onChange}>自动登录</Checkbox>
                                    }
                                    
                                    
                                    <Button id="sign-button" className="denglu" type="primary"
                                            onClick={this.handleSubmit} disabled={this.state.isAvailable}>立即登录
                                    </Button>
                                </FormItem>
                                <a className="forget-pwd" onClick={this.handleLandlordApply}>房东入驻</a>
                                <a className="forget-pwd fr" onClick={this.handClick}>忘记密码？</a>
                            </Form>:
                            <Form horizontal form={this.props.form}>
                                <FormItem 
                                    hasFeedback>
                                    <i className="phone-img"></i>
                                    <Input idName="mobilePhone" value={this.state.funderMobilePhone} {...funderMobilePhoneProps} placeholder="请输入手机号码"/>
                                </FormItem>
                                <FormItem
                                    hasFeedback>
                                    <i className="password"></i>
                                    <Input type="password" {...funderPasswordProps} placeholder="请输入登录密码" onKeyUp={this.handleKeyEventFunder}/>
                                </FormItem>
                                <FormItem
                                    hasFeedback
                                    className="login-row">
                                    {
                                        // <Checkbox className="automatic-login"
                                        //         onChange={onChange}>自动登录</Checkbox>
                                    }
                                    
                                    
                                    <Button id="sign-button" className="denglu" type="primary"
                                            onClick={this.handleSubmitFunder} disabled={this.state.isAvailable}>立即登录
                                    </Button>
                                </FormItem>
                                <a className="forget-pwd" onClick={this.handleFunderApply}>资金方入驻</a>
                                <a className="forget-pwd fr" onClick={this.handClick}>忘记密码？</a>
                            </Form>
                        }
                        
                        
                        
                        
                    </div>
                </div>
               
        )
    }
})
BannerBox = createForm()(BannerBox);
export default BannerBox;